<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>08_注册全局组件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo"></div>
    
    <script type="text/javascript">
      // 定义一个Hello组件
      const Hello = Vue.extend({
        name:'Hello',
        template:`<h3 style="color:red">Hello</h3>`
      })

      // 注册一个全局组件——Hello
      Vue.component('Hello',Hello)

      // 定义一个Person组件
      const Person = Vue.extend({
        name:'Person',
        template:`
          <div>
            <h1>人员信息</h1>
            <Hello/>
            <h3>姓名：{{pname}}</h3>
            <h3>年龄：{{age}}</h3>
            <button @click="showPerson">点我提示个人信息</button>  
          </div>
        `,
        data(){
          return {
            pname:'强哥',
            age:18,
          }
        },
        methods:{
          showPerson(){
            alert(`我叫${this.pname}我今天${this.age}岁了`)
          }
        },
      })

      // 定义一个School组件
      const School = Vue.extend({
        name:'School',
        template:`
          <div>
            <h1>学校信息</h1>
            <Hello/>
            <h3>校名：{{sname}}</h3>
            <h3>地址：{{address}}</h3>
            <button @click="showSchool">点我提示学校信息</button>
          </div>
        `,
        data(){
          return {
            sname:'尚硅谷',
            address:'成都市成华区北辰星拱青创园综合楼3层'
          }
        },
        methods:{
          showSchool(){
            alert(`${this.sname}坐落于${this.address}`)
          }
        }
      })
      
      // 定义一个App组件，所有其他的组件都是其后代
      const App = Vue.extend({
        name:'App',
        template:`
          <div>
            <Person/>
            <hr>
            <School/>  
          </div>
        `,
        components:{Person,School}
      })

      //创建vm
      new Vue({
        el:'#demo',
        template:`<App/>`,
        components:{App}
      })

    </script>
  </body>
</html>